<!--
名称:区域选择组件
作者:刘敏
日期:2021-12-13

使用示例=>
    标签代码:
        <RegionSelection @onChange="onRegionSelectionChange"></RegionSelection>
    JS代码:
        methods: {
            onRegionSelectionChange(province,city,country){
                //存储数据
                const vueIns = this
                vueIns.form.AddrProvince = province
                vueIns.form.AddrCity = city
                vueIns.form.AddrCounty  = country
                //调用父组件中的特定方法
                vueIns.onSearch()
            },
        }
示例 END

-->

<template>
  <div class="c-region-selection">
    <a-form-model-item
      style="width: 31%; height: 100%; float: left; margin-bottom: 0"
    >
      <a-select
        :placeholder="placeholder.AddrProvince"
        style="width: 100%; padding: 0; margin: 0"
        @change="onProvinceChange"
        v-model="form.AddrProvince"
        allowClear
      >
        <a-select-option
          v-for="province in selection.Province"
          :value="province"
          :key="province"
        >
          {{ province }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item
      style="
        width: 31%;
        height: 100%;
        float: left;
        margin-left: 10px;
        margin-bottom: 0;
      "
    >
      <a-select
        :placeholder="placeholder.AddrCity"
        style="width: 100%; padding: 0; margin: 0"
        @change="onCityChange"
        v-model="form.AddrCity"
      >
        <a-select-option
          v-for="city in selection.CurrCityList"
          :value="city"
          :key="city"
        >
          {{ city }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item
      style="
        width: 31%;
        height: 100%;
        float: left;
        margin-left: 10px;
        margin-bottom: 0;
      "
    >
      <a-select
        :placeholder="placeholder.AddrCounty"
        style="width: 100%; padding: 0; margin: 0"
        v-model="form.AddrCounty"
        @change="onChange"
      >
        <a-select-option
          v-for="country in selection.CurrCountryList"
          :value="country"
          :key="country"
        >
          {{ country }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "region-selection",
  components: {},
  mounted: function () {
    const vueIns = this;
    vueIns.initRegionData();
  },
  data() {
    return {
      // 表单数据
      form: {
        // 电梯地址-省
        AddrProvince: undefined,
        // 电梯地址-市
        AddrCity: undefined,
        // 电梯地址-区县
        AddrCounty: undefined,
      },
      // 提示语
      placeholder: {
        // 提示语电梯地址-省
        AddrProvince: "省",
        // 提示语电梯地址-市
        AddrCity: "市",
        // 提示语电梯地址-区县
        AddrCounty: "区/县",
      },
      // 下拉选择框动态数据
      selection: {
        // 区域信息原始数据
        RegionData: [],
        // 省列表
        Province: [],
        // 所有市列表
        AllCityData: {},
        // 当前省的市列表
        CurrCityList: [],
        // 所有区县列表
        AllCountryData: {},
        // 当前市的区县列表
        CurrCountryList: [],
      },
    };
  },
  methods: {
    // 加载区域信息
    initRegionData() {
      const vueIns = this;

      function GenerateProvince() {
        if (
          vueIns.selection.RegionData == undefined ||
          vueIns.selection.RegionData == null ||
          vueIns.selection.RegionData == ""
        ) {
          return;
        }
        vueIns.selection.Province = [];
        vueIns.selection.AllCityData = {};
        vueIns.selection.CurrCityList = [];
        vueIns.selection.AllCountryData = {};
        vueIns.selection.CurrCountryList = [];

        for (let i = 0; i < vueIns.selection.RegionData.length; i++) {
          let item = vueIns.selection.RegionData[i];
          vueIns.selection.Province.push(item.name);
          vueIns.selection.AllCityData[item.name] = [];
          vueIns.selection.AllCountryData[item.name] = {};
          GenerateCity(item.childRegions, item.name);
        }
      }

      function GenerateCity(regionData, provinceName) {
        if (regionData == undefined || regionData == null || regionData == "") {
          return;
        }
        for (let j = 0; j < regionData.length; j++) {
          let item_city = regionData[j];
          vueIns.selection.AllCityData[provinceName].push(item_city.name);
          vueIns.selection.AllCountryData[provinceName][item_city.name] = [];
          GenerateCountry(item_city.childRegions, provinceName, item_city.name);
        }
      }

      function GenerateCountry(regionData, provinceName, cityName) {
        if (regionData == undefined || regionData == null || regionData == "") {
          return;
        }
        for (let k = 0; k < regionData.length; k++) {
          let item_country = regionData[k];
          vueIns.selection.AllCountryData[provinceName][cityName].push(
            item_country.name
          );
        }
      }

      //获取区域信息
      axios
        .get("/admin/glory/region/getRegions", {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then(
          function (res) {
            if (res.data.code == 200) {
              vueIns.selection.RegionData = res.data.data;
              GenerateProvince();
            } else {
              vueIns.$message.error("区域信息加载失败:" + res.data.msg);
            }
          }.bind(this)
        )
        .catch(function (err) {
          vueIns.$message.error("区域信息加载解析出错:系统异常");
        });
    },

    //省份改变事件
    onProvinceChange(value) {
      const vueIns = this;
      vueIns.selection.CurrCityList = vueIns.selection.AllCityData[value];
      vueIns.form.AddrCity = undefined;
      vueIns.form.AddrCounty = undefined;
      vueIns.onChange();
    },
    // 市改变事件
    onCityChange(value) {
      const vueIns = this;
      vueIns.selection.CurrCountryList =
        vueIns.selection.AllCountryData[vueIns.form.AddrProvince][value];
      vueIns.form.AddrCounty = undefined;
      vueIns.onChange();
    },

    // 组件改变事件
    onChange() {
      const vueIns = this;
      vueIns.$emit(
        "onChange",
        vueIns.form.AddrProvince,
        vueIns.form.AddrCity,
        vueIns.form.AddrCounty
      );
    },
  },
};
</script>

<style scoped>
</style>
